<html>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
    .box:hover {
        box-shadow: 0 8px 8px rgba(10, 16, 20, .24), 0 0 8px rgba(10, 16, 20, .12);
        text-decoration: none;
        border: 0;
        transform: translateY(-5px);
    }

    .head {
        margin-top: 2rem;
        display: flex;
        justify-content: space-between;
        height: 3.8rem;
        line-height: 3.8rem;
    }

    .text_hidden {
        height: 3.8rem;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: center;
    }

    .h2_hidden {
        height: 1.8rem;
        line-height: 1.8rem;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: center;
    }

    .photo_hight {
        position: relative;
        height: 27.5rem;
    }

    .photo_hidden {
        width: 100%;
        height: 15.5rem;
    }

    .photo_hidden img {
        height: 15.5rem;
        width: 100%;
    }

    .photo_hight a {
        color: #000;
    }
    /* .recommend {
        color: red;
        position: absolute;
        background-color: #fff;
        top: 0rem;
        right: 0rem;
    } */

    .layui-btn-sm i {
        font-size: 2.4rem !important;
    }

    /*.praise::after {*/
    /*    content: '50';*/
    /*}*/

    /*.browse::after {*/
    /*    content: '150';*/
    /*}*/
</style>
<div class="container">
    <div>
        <h2>相册总览</h2>
    </div>
    <div class="container " style="margin-top: 2rem; background-color: #fff; ">
        <div class="row " id="album-body">
            <!--            <div class=" col-md-3 box col-xs-6 photo_hight">-->
            <!--                <div class="photo_hidden"><img src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8807%E6%97%A5__7f41b4201612184c515924169a8079b09d09a147%2F4103535362.jpg " alt=" " class="img-responsive center-block"></div>-->
            <!--                <a href="#">-->
            <!--                    <h4 class="h2_hidden"><strong>河大LOGO</strong> </h4>-->
            <!--                    <p class="text_hidden">人海加油</p>-->
            <!--                    &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> &ndash;&gt;-->
            <!--                </a>-->
            <!--                <div class="layui-btn-group ">-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise" style="border: none;">-->
            <!--                    <i class="layui-icon">&#xe6c6;</i>-->
            <!--                    </button>-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse" style="border: none;">-->
            <!--                    <i class="fa fa-eye"></i>-->
            <!--                    </button>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class=" col-md-3 box col-xs-6 photo_hight">-->

            <!--                <div class="photo_hidden"><img src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8814%E6%97%A5__44add6fd8de55fb3a3b53086bb61f9a7e5bb3b24%2F%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%8720200914083807.jpg"-->
            <!--                        alt=" " class=" center-block"></div>-->
            <!--                <a href="#">-->
            <!--                    <h4 class="h2_hidden"> <strong>新生报到</strong> </h4>-->
            <!--                    <p class="text_hidden ">人海加油</p>-->
            <!--                    &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span></a> &ndash;&gt;-->
            <!--                </a>-->
            <!--                <div class="layui-btn-group">-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise" style="border: none;">-->
            <!--                    <i class="layui-icon">&#xe6c6;</i>-->
            <!--                    </button>-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse" style="border: none;">-->
            <!--                    <i class="fa fa-eye"></i>-->
            <!--                    </button>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class=" col-md-3 box col-xs-6 photo_hight">-->

            <!--                <div class="photo_hidden"> <img src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8810%E6%97%A5__474ddabfcd2b49c754e689ee0519a922428a3475%2FF2A1B8CAD5F51BDF42B818771EF4B030ECD185C9.jpg" alt=" "-->
            <!--                        class="img-responsive center-block "></div>-->
            <!--                <a href="#">-->
            <!--                    <h4 class="h2_hidden"> <strong>考察调研</strong> </h4>-->
            <!--                    <p class="text_hidden ">民进中央副主席、秘书长高友东来我校考察调研</p>-->
            <!--                    &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span>-->
            <!--                     &ndash;&gt;-->
            <!--                </a>-->
            <!--                <div class="layui-btn-group">-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise" style="border: none;">-->
            <!--                    <i class="layui-icon">&#xe6c6;</i>-->
            <!--                    </button>-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse" style="border: none;">-->
            <!--                    <i class="fa fa-eye"></i>-->
            <!--                    </button>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class=" col-md-3 box col-xs-6 photo_hight">-->

            <!--                <div class="photo_hidden"> <img src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8810%E6%97%A5__3c77319ad6600f7b4c126860d558eaf677fbf906%2FAD1799030BF235172F527C390D2D4231C9319022.jpg" alt=" "-->
            <!--                        class="img-responsive center-block "></div>-->
            <!--                <a href="#">-->
            <!--                    <h4 class="h2_hidden"> <strong>科研平台</strong> </h4>-->
            <!--                    <p class="text_hidden ">人海加油</p>-->
            <!--                    &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> &ndash;&gt;-->
            <!--                </a>-->
            <!--                <div class="layui-btn-group">-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise" style="border: none;">-->
            <!--                    <i class="layui-icon">&#xe6c6;</i>-->
            <!--                    </button>-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse" style="border: none;">-->
            <!--                    <i class="fa fa-eye"></i>-->
            <!--                    </button>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class=" col-md-3 box col-xs-6 photo_hight">-->

            <!--                <div class="photo_hidden"><img src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8807%E6%97%A5__fa7d181dfcc86ab57847fb499a2b164881ccc1b3%2Fu4416128501633144491fm173app49fJPEG.jpg" alt=" " class="img-responsive center-block "></div>-->
            <!--                <a href="#">-->
            <!--                    <h4 class="h2_hidden"> <strong>河大校园</strong> </h4>-->
            <!--                    <p class="text_hidden ">人海加油</p>-->
            <!--                    &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> &ndash;&gt;-->
            <!--                </a>-->
            <!--                <div class="layui-btn-group">-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise" style="border: none;">-->
            <!--                    <i class="layui-icon">&#xe6c6;</i>-->
            <!--                    </button> <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse" style="border: none;">-->
            <!--                    <i class="fa fa-eye"></i>-->
            <!--                    </button>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class=" col-md-3 box col-xs-6 photo_hight">-->

            <!--                <div class="photo_hidden"><img src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8807%E6%97%A5__3248d701f4548e917c35bad7aa94f8b8535ea2d3%2F1588109358729378.jpg" alt=" " class="img-responsive center-block "></div>-->
            <!--                <a href="#">-->
            <!--                    <h4 class="h2_hidden"> <strong>南大门</strong> </h4>-->
            <!--                    <p class="text_hidden ">人海加油</p>-->
            <!--                    &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> &ndash;&gt;-->
            <!--                </a>-->
            <!--                <div class="layui-btn-group">-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise" style="border: none;">-->
            <!--                    <i class="layui-icon">&#xe6c6;</i>-->
            <!--                    </button>-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse" style="border: none;">-->
            <!--                    <i class="fa fa-eye"></i>-->
            <!--                    </button>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class=" col-md-3 box col-xs-6 photo_hight">-->

            <!--                <div class="photo_hidden"><img src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8807%E6%97%A5__06f7dcf5ab127dd43c9841175c0ecc04dc7cb862%2Ftimg2.jpg " alt=" " class="img-responsive center-block "></div>-->
            <!--                <a href="#">-->
            <!--                    <h4 class="h2_hidden"> <strong>大礼堂</strong> </h4>-->
            <!--                    <p class="text_hidden ">人海加油</p>-->
            <!--                    &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> &ndash;&gt;-->
            <!--                </a>-->
            <!--                <div class="layui-btn-group">-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise" style="border: none;">-->
            <!--                    <i class="layui-icon">&#xe6c6;</i>-->
            <!--                    </button>-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse" style="border: none;">-->
            <!--                    <i class="fa fa-eye"></i>-->
            <!--                    </button>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class=" col-md-3 box col-xs-6 photo_hight">-->

            <!--                <div class="photo_hidden"> <img src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8807%E6%97%A5__7f41b4201612184c515924169a8079b09d09a147%2F4103535362.jpg " alt=" " class="img-responsive center-block"></div>-->
            <!--                <a href="#">-->
            <!--                    <h4 class="h2_hidden"><strong>河大LOGO</strong> </h4>-->
            <!--                    <p class="text_hidden">人海加油</p>-->
            <!--                    &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> &ndash;&gt;-->
            <!--                </a>-->
            <!--                <div class="layui-btn-group">-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise" style="border: none;">-->
            <!--                    <i class="layui-icon">&#xe6c6;</i>-->
            <!--                    </button>-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse" style="border: none;">-->
            <!--                    <i class="fa fa-eye"></i>-->
            <!--                    </button>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class=" col-md-3 box col-xs-6 photo_hight">-->

            <!--                <div class="photo_hidden"><img src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8807%E6%97%A5__fa7d181dfcc86ab57847fb499a2b164881ccc1b3%2Fu4416128501633144491fm173app49fJPEG.jpg" alt=" " class="img-responsive center-block "></div>-->
            <!--                <a href="#">-->
            <!--                    <h4 class="h2_hidden"> <strong>河大校园</strong> </h4>-->
            <!--                    <p class="text_hidden ">人海加油</p>-->
            <!--                    &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> &ndash;&gt;-->
            <!--                </a>-->
            <!--                <div class="layui-btn-group">-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise" style="border: none;">-->
            <!--                    <i class="layui-icon">&#xe6c6;</i>-->
            <!--                    </button> <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse" style="border: none;">-->
            <!--                    <i class="fa fa-eye"></i>-->
            <!--                    </button>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class=" col-md-3 box col-xs-6 photo_hight">-->

            <!--                <div class="photo_hidden"><img src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8807%E6%97%A5__3248d701f4548e917c35bad7aa94f8b8535ea2d3%2F1588109358729378.jpg" alt=" " class="img-responsive center-block "></div>-->
            <!--                <a href="#">-->
            <!--                    <h4 class="h2_hidden"> <strong>南大门</strong> </h4>-->
            <!--                    <p class="text_hidden ">人海加油</p>-->
            <!--                    &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> &ndash;&gt;-->
            <!--                </a>-->
            <!--                <div class="layui-btn-group">-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise" style="border: none;">-->
            <!--                    <i class="layui-icon">&#xe6c6;</i>-->
            <!--                    </button>-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse" style="border: none;">-->
            <!--                    <i class="fa fa-eye"></i>-->
            <!--                    </button>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class=" col-md-3 box col-xs-6 photo_hight">-->

            <!--                <div class="photo_hidden"><img src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8807%E6%97%A5__06f7dcf5ab127dd43c9841175c0ecc04dc7cb862%2Ftimg2.jpg " alt=" " class="img-responsive center-block "></div>-->
            <!--                <a href="#">-->
            <!--                    <h4 class="h2_hidden"> <strong>大礼堂</strong> </h4>-->
            <!--                    <p class="text_hidden ">人海加油</p>-->
            <!--                    &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> &ndash;&gt;-->
            <!--                </a>-->
            <!--                <div class="layui-btn-group">-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise" style="border: none;">-->
            <!--                    <i class="layui-icon">&#xe6c6;</i>-->
            <!--                    </button>-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse" style="border: none;">-->
            <!--                    <i class="fa fa-eye"></i>-->
            <!--                    </button>-->
            <!--                </div>-->
            <!--            </div>-->
            <!--            <div class=" col-md-3 box col-xs-6 photo_hight">-->

            <!--                <div class="photo_hidden"> <img src="http://sxgl.henu.edu.cn:80//index/showImage.do?type=3&img=%2Fuploadimg%2F%E5%9B%BE%E7%89%87%2F2020%E5%B9%B409%E6%9C%8807%E6%97%A5__7f41b4201612184c515924169a8079b09d09a147%2F4103535362.jpg " alt=" " class="img-responsive center-block"></div>-->
            <!--                <a href="#">-->
            <!--                    <h4 class="h2_hidden"><strong>河大LOGO</strong> </h4>-->
            <!--                    <p class="text_hidden">人海加油</p>-->
            <!--                    &lt;!&ndash; <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> &ndash;&gt;-->
            <!--                </a>-->
            <!--                <div class="layui-btn-group">-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise" style="border: none;">-->
            <!--                    <i class="layui-icon">&#xe6c6;</i>-->
            <!--                    </button>-->
            <!--                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse" style="border: none;">-->
            <!--                    <i class="fa fa-eye"></i>-->
            <!--                    </button>-->
            <!--                </div>-->
            <!--            </div>-->
        </div>
    </div>
</div>
<!--暂不支持分页-->
<div style="text-align: center;">
    <div id="page-controller"></div>
</div>
<script>

    var albumCount;
    jq1111.ajax({
        type: "GET",
        crossDomain:true,
        async:false,
        url: BasePath+"api/SchoolAlbum?page=1&limit=12",
        contentType: "application/json",
        dataType:"json",
        xhrFields: {
            withCredentials: true
        },
        success:function (message) {
            albumCount=message.count;
        },
        error:function (message) {
            console.log(message.responseJSON);
        },
    });

    function update(message) {
        console.log(message);
        albumCount=message.count;
        for (j=0;j<message.data.length;j++){
            if(message.data[j].coverid===null){
                continue
            }
            jq1111('#album-body').append('<div class=" col-md-3 box col-xs-6 photo_hight">\n' +
                '                <div class="photo_hidden"><img src="' + BasePath + 'api/resource/' + message.data[j].coverId+ '" alt=" " class="img-responsive center-block"></div>\n' +
                '                <a href="'+'page/new-show.html?albumId='+message.data[j].id+'">\n' +
                '                    <h4 class="h2_hidden"><strong>'+message.data[j].title+'</strong> </h4>\n' +
                '                    <p class="text_hidden">'+message.data[j].description+'</p>\n' +
                '                    <!-- <span class="layui-badge-rim recommend layui-bg-blue">Hot</span> -->\n' +
                '                </a>\n' +
                '                <div class="layui-btn-group ">\n' +
                '                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary praise" onclick="ilikeit('+message.data[j].id+')" style="border: none;">\n' +
                '                    <i class="layui-icon">&#xe6c6;</i>\n' +message.data[j].likeCount+
                '                    </button>\n' +
                '                    <button type="button" class="layui-btn layui-btn-sm  layui-btn-primary browse" style="border: none;">\n' +
                '                    <i class="fa fa-eye"></i>\n' +message.data[j].downloadCount+
                '                    </button>\n' +
                '                </div>\n' +
                '            </div>')
        }
    }

    function ilikeit(id) {
        try {
            jq1111.ajax({
                type: "POST",
                crossDomain:true,
                async:false,
                url: BasePath+"api/Album/"+id+"/Like",
                contentType: "application/json",
                dataType:"json",
                xhrFields: {
                    withCredentials: true
                },
                success:function (message) {
                    alert('点赞成功');
                    location.reload();

                },
                error:function (message) {
                    console.log(message.responseJSON);
                },
            });
        }catch (e) {
            console.log(e)
        }
    }

    //初始化分页
    layui.use(['laypage', 'layer'], function() {
        var laypage = layui.laypage,
            layer = layui.layer;

        //完整功能
        laypage.render({
            elem: 'page-controller',
            count: albumCount,
            limit:12,
            layout: ['count', 'prev', 'page', 'next', 'skip'],
            jump: function(obj) {
                jq1111.ajax({
                    type: "GET",
                    crossDomain:true,
                    async:false,
                    url: BasePath+"api/SchoolAlbum?page="+obj.pages+"&limit=12",
                    contentType: "application/json",
                    dataType:"json",
                    xhrFields: {
                        withCredentials: true
                    },
                    success:update,
                    error:function (message) {
                        console.log(message.responseJSON);
                    },
                });
                console.log(obj)
            }
        });

    })
</script>

</html>